<script setup>
import {computed, defineProps, defineEmits} from 'vue'

const props = defineProps({
  options: Array,
  modelValue: {
    type: String,
    default: ''
  },
  color: {
    type: String,
    default: 'red'
  }
})

const emit = defineEmits(['update:modelValue']);

const selectedValue = computed({
  get() {
    return props.modelValue ? props.modelValue : '';
  },
  set(value) {
    emit('update:modelValue', value? value: '');
  }
});
</script>

<template>
  <van-radio-group v-model="selectedValue" direction="horizontal">
    <van-radio shape="square" v-for="(item,index) in options" :key="index" :name="item.key">
      <template #icon="props">
        <van-button size="small" hairline v-if="props.checked" :color="color">{{item.name}}</van-button>
        <van-button size="small" hairline v-else>{{item.name}}</van-button>
      </template>
    </van-radio>
  </van-radio-group>
</template>

<style scoped lang="scss">
.van-radio-container {
  display: flex;
}
:deep(.van-radio__icon) {
  height: 2em;
}

.van-radio-group--horizontal {
  justify-content: center;
}
</style>